import React, { Component } from 'react'
import Icon from '../icon/Icon'
import * as layout from '../../configs/layout'
import * as color from '../../configs/color'
import noop from 'lodash/noop'
import * as helper from '../../utilities/helper'

const boxStyle = {
    paddingLeft: layout.HORIZONTAL_PADDING,
    paddingRight: layout.HORIZONTAL_PADDING,
    backgroundColor: color.WHITE,
    borderTop: '1px solid ' + color.LIGHTER,
    height: '46px',
    fontSize: '16px',
    color: color.DARK
}
const labelStyle = {
    minWidth: '64px'
}
const valueWrapperStyle = {
    marginLeft: '10px',
    textAlign: 'right'
}
const inputStyle = {
    textAlign: 'right'
}
const prefixStyle = {}
const postfixStyle = {}
const valueStyle = {}
const chevronStyle = {
    color: color.CHEVRON
}

const promptText = {
    color: color.LIGHT
}

let lazyUpdateTimer = null

export default class ListViewBox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: this.props.value,
            isValid: false
        }
        this.handleInputChange = this.handleInputChange.bind(this)
        this.lazyValidate = this.lazyValidate.bind(this)
        this.setValue = this.setValue.bind(this)
        this.validate = this.validate.bind(this)
        this.handleClick = this.handleClick.bind(this)
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            value: nextProps.value
        }, () => {
            this.validate()
        })
    }

    componentDidMount() {
        this.validate()
    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextState.value != this.state.value || nextProps.value != this.state.value
    }

    setValue(value) {
        this.setState({
            value: value
        })
    }

    handleInputChange(event) {
        this.setValue(event.target.value)
        this.lazyValidate()
    }

    validate() {
        let valid = false
        if (this.props.validator) {
            valid = this.props.validator(this.state.value)
        } else if (this.props.pattern) {
            valid = this.props.pattern.test(this.state.value)
        }
        this.setState({
            isValid: valid
        }, () => {
            this.props.onChange(this.state.value)
        })
    }

    lazyValidate() {
        clearTimeout(lazyUpdateTimer)
        lazyUpdateTimer = setTimeout(() => {
            this.validate()
        }, 200)
    }

    handleClick() {
        this.props.onClick()
    }

    render() {
        return (
            <div onClick={this.handleClick} className="flex-h flex-justify flex-vc" style={helper.combineStyles(boxStyle, {}, '', this.props.style)}>
                <label style={labelStyle}>{this.props.label}</label>
                <div className="flex-h flex-vc flex1 flex-end" style={valueWrapperStyle}>
                    {this.props.prefix ? <span style={prefixStyle}>{this.props.prefix}</span> : null}
                    {
                        this.props.input
                            ? <input className="flex1" readOnly={this.props.readonly} onChange={this.handleInputChange} type={this.props.type} style={inputStyle} value={this.state.value} placeholder={this.props.placeholder} max={this.props.max} maxLength={this.props.maxLength}/>
                            : <span className="flex1" style={this.props.value ? null : promptText}>{this.props.value || this.props.placeholder}</span>
                    }
                    {this.props.postfix ? <span style={postfixStyle}>{this.props.postfix}</span> : null}
                    {this.props.chevron ? <Icon style={chevronStyle} iconName="chevron"/> : null}
                </div>
            </div>
        )
    }
}

ListViewBox.defaultProps = {
    input: true,
    readonly: false,
    pattern: null,
    validator: null,
    type: 'text',
    placeholder: '',
    max: 10000,
    maxLength: 15,
    chevron: false,
    prefix: '',
    value: '',
    postfix: '',
    label: '',
    onChange: noop,
    onClick: noop,
    style: {}
}

ListViewBox.propTypes = {
    input: React.PropTypes.bool,
    readonly: React.PropTypes.bool,
    pattern: React.PropTypes.object,
    validator: React.PropTypes.func,
    type: React.PropTypes.string,
    maxLength: React.PropTypes.number,
    max: React.PropTypes.number,
    placeholder: React.PropTypes.oneOfType([
        React.PropTypes.number,
        React.PropTypes.string
    ]),
    chevron: React.PropTypes.bool,
    value: React.PropTypes.oneOfType([
        React.PropTypes.number,
        React.PropTypes.string
    ]),
    prefix: React.PropTypes.string,
    postfix: React.PropTypes.string,
    label: React.PropTypes.string,
    onChange: React.PropTypes.func,
    onClick: React.PropTypes.func,
    style: React.PropTypes.object
}